<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true">
        <el-form-item prop="expressCode">
          <el-input
            v-model.trim="searchParam.expressCode"
            @keyup.enter.native="search"
            placeholder="输入快递公司编号查询"
          ></el-input>
        </el-form-item>
        <el-form-item prop="prdName">
          <el-input
            v-model.trim="searchParam.prdName"
            @keyup.enter.native="search"
            placeholder="输入产品名称查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="vbox flex1">
      <div class="toolbar">
        <el-button type="primary" v-auth="'add'" plain icon="el-icon-plus" @click="addPrd">添加产品</el-button>
      </div>
      <base-table
        ref="productTable"
        url="product/getPage"
        code="htk"
        :param="searchParam"
        :cls="columns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
        :option-width="320"
      ></base-table>
    </div>
    <el-dialog center title="产品管理" :visible.sync="showPrdDialog" width="45%">
      <el-form ref="prdForm" :model="product" :rules="rules" label-width="120px">
        <el-row>
          <ElCol :span="24">
            <el-form-item label="产品编号">
              <el-input disabled v-model.trim="product.prdCode" placeholder="后台自动生成"></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="产品名称" prop="prdName">
              <el-input v-model.trim="product.prdName" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="快递公司" prop="expressCode">
              <el-select v-model="product.serviceProviderId" placeholder="请选择清关公司">
                <el-option v-for="p in expressProviders" :key="p.id" :label="p.name" :value="p.id"></el-option>
              </el-select>
              <!-- <el-input v-model.trim="product.expressCode" placeholder="请输入快递公司"></el-input> -->
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="限重" prop="maxWeight">
              <el-input-number
                style="width:50%"
                :min="0"
                v-model.trim="product.maxWeight"
                placeholder="请输入限重"
              ></el-input-number>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="备注" prop="rmk">
              <el-input type="textarea" v-model.trim="product.rmk" placeholder="请输入备注"></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="第三方对接类型" prop="apiType">
              <base-select
                v-model.trim="product.apiType"
                dictCode="api_type"
                placeholder="请选择第三方对接类型"
              ></base-select>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="第三方对接key" prop="apiKey">
              <el-input v-model.trim="product.apiKey" placeholder="请输入第三方对接key"></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="第三方对接URL" prop="apiUrl">
              <el-input v-model.trim="product.apiUrl" placeholder="请输入第三方对接URL"></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="第三方导出模板" prop="apiOrderTemplate">
              <base-select
                clearable
                type="custom"
                url="template/listByType/order-template"
                v-model.trim="product.apiOrderTemplate"
                placeholder="请选择第三方导出模板"
              ></base-select>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="默认单位" prop="unit">
              <base-select v-model.trim="product.unit" dictCode="unit" placeholder="请选择默认单位"></base-select>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="面单打印模板" prop="expressTemplate">
              <el-select
                style="width:100%"
                clearable
                filterable
                v-model="product.expressTemplate"
                placeholder="请选择面单打印模板"
              >
                <el-option v-for="item in temps" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="报关单模板" prop="customsDeclarationTemplate">
              <base-select
                type="custom"
                url="template/listByType/declaration-template"
                v-model.trim="product.customsDeclarationTemplate"
                placeholder="请选择报关单模板"
              ></base-select>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <el-form-item label="清关单模板" prop="customsClearanceTemplate">
              <base-select
                type="custom"
                url="template/listByType/clearance-template"
                v-model.trim="product.customsClearanceTemplate"
                placeholder="请选择清关单模板"
              ></base-select>
            </el-form-item>
          </ElCol>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveProduct">保 存</el-button>
        <el-button @click="showPrdDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="产品资费" :visible.sync="showPriceDialog" width="75%">
      <div style="height:500px;" class="vbox">
        <base-table
          :height="300"
          ref="priceTable"
          url="price/getPage"
          code="htk"
          :param="priceSearchParam"
          :auto-load="false"
          :cls="priceColumns"
          :optionBtns="priceOptionBtns"
          @handlerOption="priceHandlerOption"
        ></base-table>
      </div>
    </el-dialog>
    <el-dialog
      title="添加产品资费"
      custom-class="customDialogClass"
      :visible.sync="showAddPriceDialog"
      center
      width="47%"
      top="3%"
    >
      <el-form ref="priceForm" :model="price" :rules="priceRules" label-width="140px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="产品名称" prop="prdName">
              <el-input style="width:100%" v-model.trim="price.prdName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择国家" prop="countryCode">
              <base-select
                style="width:100%"
                type="custom"
                code="htk-admin"
                v-model.trim="price.countryCode"
                url="country/selectCountries"
                placeholder="请选择国家"
              ></base-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路向（目的地）" prop="destination">
              <el-input v-model.trim="price.destination" placeholder="请输入路向（目的地）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂号费" prop="certificationFee">
              <el-input-number
                style="width:100%"
                :min="0"
                :precision="3"
                v-model.trim="price.certificationFee"
                placeholder="请输入挂号费"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单件处理费" prop="coverCharge">
              <el-input-number
                style="width:100%"
                :min="0"
                :precision="3"
                v-model.trim="price.coverCharge"
                placeholder="请输入单件处理费"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包裹类型" prop="packageType">
              <base-select
                v-model.trim="price.packageType"
                dictCode="send_type"
                placeholder="请选择包裹类型"
              ></base-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货币类型" prop="currency">
              <base-select v-model.trim="price.currency" dictCode="currency" placeholder="请选择货币类型"></base-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递类型" prop="expressType">
              <base-select
                v-model.trim="price.expressType"
                dictCode="express_type"
                placeholder="请选择快递类型"
              ></base-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计价类型" prop="priceType">
              <base-select
                v-model.trim="price.priceType"
                dictCode="price_type"
                placeholder="请选择计价类型"
              ></base-select>
            </el-form-item>
          </el-col>
          <div v-if="price.priceType == 1 || price.priceType == 3">
            <el-col :span="12">
              <el-form-item :label="'起步重量（'+unitName+'）'" prop="startingWeight">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  v-model.trim="price.startingWeight"
                  placeholder="请输入起步重量"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起步价格（元）" prop="startingPrice">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.startingPrice"
                  placeholder="请输入起步价格（元）"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="'续重（'+unitName+'）'" prop="rate">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.rate"
                  placeholder="请输入续重"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="续重价格（元）" prop="ratePrice">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.ratePrice"
                  placeholder="请输入续重价格（元）"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最小重量" prop="minWeight">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.minWeight"
                  placeholder="请输入最小重量"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大重量" prop="maxWeight">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.maxWeight"
                  placeholder="请输入最大重量"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="price.priceType == 2 || price.priceType == 3">
            <el-col :span="12">
              <el-form-item label="起步体积(CM2)" prop="startingSize">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.startingSize"
                  placeholder="请输入起步体积"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起步价格(元)" prop="startingSizePrice">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.startingSizePrice"
                  placeholder="请输入起步价格"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="增量体积(CM2)" prop="rateSize">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.rateSize"
                  placeholder="请输入增量体积"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="增量价格(元)" prop="rateSizePrice">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.rateSizePrice"
                  placeholder="请输入增量价格"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最小体积" prop="minSize">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.minSize"
                  placeholder="请输入最小体积"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大体积" prop="maxSize">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.maxSize"
                  placeholder="请输入最大体积"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体积换算比例" prop="ratio">
                <el-input-number
                  style="width:100%"
                  :min="0"
                  :precision="3"
                  v-model.trim="price.ratio"
                  placeholder="请输入体积换算成重量比例"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePrdPrice">保 存</el-button>
        <el-button @click="showAddPriceDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      unitName: "克",
      showPrdDialog: false,
      showPriceDialog: false,
      showAddPriceDialog: false,
      searchParam: {},
      priceSearchParam: {
        prdCode: ""
      },
      temps: [],
      product: {
        id: "",
        prdCode: "",
        prdName: "",
        maxWeight: 0,
        expressCode: "",
        unit: "",
        expressTemplate: "",
        customsDeclarationTemplate: "",
        customsClearanceTemplate: "",
        apiKey: "",
        apiType: "",
        apiUrl: "",
        apiOrderTemplate: ""
      },
      price: {
        id: "",
        prdCode: "",
        destination: "",
        coverCharge: 0.0,
        startingWeight: "",
        startingPrice: 0.0,
        rate: "",
        ratePrice: 0.0,
        packageType: "",
        expressType: "",
        certificationFee: 0,
        countryCode: "",
        minWeight: 0,
        maxWeight: 0,
        priceType: "1"
      },
      columns: [
        { prop: "prdCode", label: "产品编码" },
        { prop: "prdName", label: "产品名称" },
        { prop: "expressServiceProvider", label: "快递公司" },
        { prop: "maxWeight", label: "限重" },
        { prop: "unitName", label: "默认单位" },
        { prop: "crteTime", label: "创建时间", width: 180 }
      ],
      priceColumns: [
        { prop: "prdName", label: "产品名称" },
        { prop: "destination", label: "路向（目的地）" },
        { prop: "countryName", label: "国家名称" },
        { prop: "coverCharge", label: "单件处理费" },
        { prop: "certificationFee", label: "挂号费" },
        { prop: "startingWeight", label: "起步重量(克)" },
        { prop: "startingPrice", label: "起步价格（元）" },
        { prop: "rate", label: "续重（克）" },
        { prop: "ratePrice", label: "续重价格（克）" },
        { prop: "packageName", label: "包裹类型" },
        { prop: "minWeight", label: "最小重量" },
        { prop: "maxWeight", label: "最大重量" }
      ],
      optionBtns: [
        { text: "编辑", code: "prd_list_edit", type: "primary" },
        { text: "添加资费", code: "prd_list_addPrice" },
        { text: "资费列表", code: "prd_list_priceList" },
        { text: "删除", code: "prd_list_delete" }
      ],
      priceOptionBtns: [
        { text: "编辑", code: "editPrice", type: "primary" },
        { text: "删除", code: "deletePrice" }
      ],
      priceRules: {
        destination: [
          {
            required: true,
            message: "请输入路向（目的地）",
            trigger: ["change", "blur"]
          }
        ],
        countryCode: [
          {
            required: true,
            message: "请选择国家",
            trigger: ["change", "blur"]
          }
        ],
        certificationFee: [
          {
            required: true,
            message: "请输入挂号费",
            trigger: ["change", "blur"]
          }
        ],
        coverCharge: [
          {
            required: true,
            message: "请输入单件处理费",
            trigger: ["change", "blur"]
          }
        ],
        startingWeight: [
          {
            required: true,
            message: "请输入起步重量(克)",
            trigger: ["change", "blur"]
          }
        ],
        startingPrice: [
          {
            required: true,
            message: "请输入起步价格（元）",
            trigger: ["change", "blur"]
          }
        ],
        rate: [
          {
            required: true,
            message: "请输入续重（克）",
            trigger: ["change", "blur"]
          }
        ],
        ratePrice: [
          {
            required: true,
            message: "请输入续重价格（元）",
            trigger: ["change", "blur"]
          }
        ],
        packageType: [
          {
            required: true,
            message: "请选择包裹类型",
            trigger: ["change", "blur"]
          }
        ],
        currency: [
          {
            required: true,
            message: "请选择货币类型",
            trigger: ["change", "blur"]
          }
        ]
      },
      rules: {
        prdName: [
          {
            required: true,
            message: "请输入产品名称",
            trigger: ["change", "blur"]
          }
        ],
        expressCode: [
          {
            required: true,
            message: "请输入快递公司编号",
            trigger: ["change", "blur"]
          }
        ],
        maxWeight: [
          {
            required: true,
            message: "请输入限重",
            trigger: ["change", "blur"]
          }
        ],
        unit: [
          {
            required: true,
            message: "请选择默认单位",
            trigger: ["change", "blur"]
          }
        ]
      },
      expressProviders: []
    };
  },
  mounted() {
    this.initPrd = JSON.parse(JSON.stringify(this.$data.product));
    this.initPrice = JSON.parse(JSON.stringify(this.$data.price));
  },
  created() {
    this.getTemps();
    this.getServiceProviders();
  },
  methods: {
    search() {
      this.$refs["productTable"].initLoad();
    },
    searchPrice() {
      this.$refs["priceTable"].initLoad();
    },
    getServiceProviders() {
      let me = this;
      me.$http.ajax({
        url: "serviceprovider/listByType/1",
        code: "htk",
        success: res => {
          me.expressProviders = res;
        }
      });
    },
    getTemps() {
      let me = this;
      me.$http.ajax({
        url: "printTemp/getList",
        code: "htk",
        success(res) {
          me.temps = res;
        }
      });
    },
    handlerOption(code, row) {
      if (code == "prd_list_delete") {
        this.deletePrd(row);
      } else if (code == "prd_list_edit") {
        this.editPrd(row);
      } else if (code == "prd_list_priceList") {
        this.showPriceDialog = true;
        this.$nextTick(() => {
          this.$refs.priceTable.clearData();
          this.priceSearchParam.prdCode = row.prdCode;
          this.$refs.priceTable.initLoad();
          this.unitName = row.unitName;
          this.priceColumns = [
            { prop: "prdName", label: "产品名称" },
            { prop: "destination", label: "路向（目的地）" },
            { prop: "countryName", label: "国家名称" },
            { prop: "coverCharge", label: "单件处理费" },
            { prop: "certificationFee", label: "挂号费" },
            {
              prop: "startingWeight",
              label: "起步重量(" + this.unitName + ")"
            },
            { prop: "startingPrice", label: "起步价格（元）" },
            { prop: "rate", label: "续重（" + this.unitName + "）" },
            { prop: "ratePrice", label: "续重价格（" + this.unitName + "）" },
            { prop: "packageName", label: "包裹类型" },
            { prop: "minWeight", label: "最小重量" },
            { prop: "maxWeight", label: "最大重量" }
          ];
        });
      } else if (code == "prd_list_addPrice") {
        this.addPrice(row);
      }
    },
    priceHandlerOption(code, row) {
      if (code == "editPrice") {
        this.editPrice(row);
      } else if (code == "deletePrice") {
        this.deletePrice(row);
      }
    },
    editPrice(row) {
      let me = this;
      me.showAddPriceDialog = true;
      me.$nextTick(() => {
        me.$refs.priceForm.resetFields();
        let tempData = Object.assign({}, row);
        me.price = tempData;
      });
    },
    addPrice(row) {
      let me = this;
      me.showAddPriceDialog = true;
      me.$nextTick(() => {
        me.price = Object.assign({}, me.initPrice);
        me.$refs.priceForm.resetFields();
        me.price.prdCode = row.prdCode;
        me.price.prdName = row.prdName;
        me.price.maxWeight = row.maxWeight;
        me.unitName = row.unitName;
      });
    },
    deletePrice(row) {
      let me = this;
      me.$confirm("确定要删除选中行数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        me.$http.ajax({
          url: "price/batchDelete",
          data: {
            ids: [row.id]
          },
          code: "htk",
          success: res => {
            me.$message.success("删除成功");
            me.searchPrice();
          }
        });
      });
    },
    addPrd() {
      let me = this;
      me.showPrdDialog = true;
      me.$nextTick(() => {
        me.product = Object.assign({}, me.initPrd);
        me.$refs.prdForm.resetFields();
      });
    },
    editPrd(row) {
      let me = this;
      me.showPrdDialog = true;
      me.$nextTick(() => {
        me.$refs.prdForm.resetFields();
        let tempData = Object.assign({}, row);
        me.product = tempData;
        me.unitName = me.product.unitName;
        me.product.expressTemplate = parseInt(tempData.expressTemplate);
      });
    },
    deletePrd(row) {
      let me = this;
      me.$confirm("确定要删除选中行数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        me.$http.ajax({
          url: "product/batchDelete",
          data: {
            ids: [row.id]
          },
          code: "htk",
          success: res => {
            me.$message.success("删除成功");
            me.showPrdDialog = false;
            me.search();
          }
        });
      });
    },
    saveProduct() {
      let me = this;
      me.$refs["prdForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "product/saveProduct",
            data: me.product,
            code: "htk",
            success: res => {
              me.$message.success("保存成功");
              me.showPrdDialog = false;
              me.search();
            }
          });
        }
      });
    },
    savePrdPrice() {
      let me = this;
      me.$refs["priceForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "price/savePrice",
            data: me.price,
            code: "htk",
            success: res => {
              me.$message.success("保存成功");
              me.showAddPriceDialog = false;
              me.searchPrice();
            }
          });
        }
      });
    }
  }
};
</script>

<style>
.width100 {
  width: 100%;
}
</style>
